import { useRouterState } from "@tanstack/react-router";
import { Fragment } from "react/jsx-runtime";
import { ThemeToggle } from "@/components/mode-toggle";
import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbList,
	BreadcrumbPage,
	BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { Separator } from "../ui/separator";
import { UserAvatar } from "./user-avatar";

export function Header() {
	const router = useRouterState();
	const pathparts = router.location.pathname.split("/").filter(Boolean);
	const pathnames = pathparts.length ? pathparts : ["dashboard"];
	return (
		<header className="flex h-16 shrink-0 items-center border-b px-6 justify-between">
			<div className="flex items-center gap-2">
				<SidebarTrigger className="-ml-1 cursor-pointer text-muted-foreground hover:text-foreground transition-colors" />
				<Separator
					orientation="vertical"
					className="mr-2 data-[orientation=vertical]:h-4"
				/>
				<Breadcrumb>
					<BreadcrumbList>
						{pathnames.map((pathname, index) => (
							<Fragment key={pathname}>
								<BreadcrumbItem>
									<BreadcrumbPage className="capitalize text-muted-foreground hover:text-foreground transition-colors">
										{pathname}
									</BreadcrumbPage>
								</BreadcrumbItem>

								{index < pathnames.length - 1 && (
									<BreadcrumbSeparator className="hidden md:block" />
								)}
							</Fragment>
						))}
					</BreadcrumbList>
				</Breadcrumb>
			</div>
			<div className="flex items-center gap-4">
				<ThemeToggle />
				<UserAvatar />
			</div>
		</header>
	);
}
